@charset 'utf-8';
@import 'common/base';

.web {
	.lotto-content {
		width: 100%;
		height: 100%;
		position: relative;

		.lotto-box {
			width: 100%;
			display: -webkit-flex;
			display: flex;
			flex-wrap: wrap;
            .lotto-item {
            	width: 33.3%;
            	height: r(275);
            	position: relative;
            	img {
            		width: 100%;
            		height: 100%;
            	}
            }

            .lotto-item-hover {
            	&::after {
            		content: "";
            		width: 100%;
            		height: r(275);
            		display: block;
                    background: rgba(0,0,0,0.5);
                    position: absolute;
                    top: 0;
                    z-index: 99;
            	}
            }

            .lotto-item:nth-of-type(4) {
                order: 2;
            }

            .lotto-item:nth-of-type(5) {
                order: 1;
                position: relative;
                .lotto-start-text {
                	width: r(145);
                	height: r(77);
                	overflow: hidden;
                	position: absolute;
                	top: r(105);
                	left: r(35);
                	img {
                		width: 100%;
                	}
                }
            }
            .lotto-item:nth-of-type(6) {
                order: 5;
            }
            .lotto-item:nth-of-type(7) {
                order: 4;
            }
            .lotto-item:nth-of-type(8) {
                order: 3;
            }
		}
	}
}